<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品编辑</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <script src="/lib/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="/icheck-1.x/icheck.js"></script>
    <script src="/bootstrap-switch-master/dist/js/bootstrap-switch.js"></script>
    <link href="/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
    <link href="/icheck-1.x/skins/all.css" rel="stylesheet">
    <link href="/H-ui.admin/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" >
    <script src="/H-ui.admin/lib/webuploader/0.1.5/webuploader.js"></script>
    <script src="/H-ui.admin/lib/layer/2.4/layer.js"></script>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<form action="{:url('edit')}" class="form-horizontal" method="post" style="margin: 25px 50px" enctype="multipart/form-data">
    <input type="text" value="{$item?$item.uid:''}" name="uid" hidden>
    <div class="form-group">
        <label class="col-sm-2 control-label">用户昵称</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" name="nickname" value="{$item?$item.nickname:''}">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">用户头像</label>
        <div class="col-sm-8">
            <div id="headimgList" class="uploader-list">
                {notempty name="item.headimg"}
                <div class="file-item thumbnail">
                    <img src="{$item.headimg}" style="display: inline-block;width:100px;" class="headimgFromServer" />
                    <em class="close">×</em>
                </div>
                {/notempty}
            </div>
            <span class="help-block">图片大小小于500kb</span>
            <div id="headimg">选择图片</div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">用户手机</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" name="mobile" value="{$item?$item.mobile:''}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">真实姓名</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" name="rname" value="{$item.user?$item.rname:''}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">性别</label>
        <div class="col-sm-8">
            <div class="radio-inline">
                <input type="radio" checked class="form-control" name="sex" value="0" {:!empty($item)&&$item.sex==0?'checked':''}>&emsp;男
            </div>
            <div class="radio-inline">
                <input type="radio" class="form-control" name="sex"  value="1" {:!empty($item)&&$item.sex==0?'checked':''}>&emsp;女
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">签名</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" name="sign" value="{$item?$item.sign:''}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">地址码</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" name="zone_code" value="{$item?$item.zone_code:''}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">生日</label>
        <div class="col-sm-8">
            <input type="date" class="form-control" name="birthday" value="{$item?$item.birthday:''}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">用户激活状态</label>
        <div class="col-sm-8">
            <div class="radio-inline">
                <input type="radio" class="form-control" checked name="status" value="0" {:!empty($item)&&$item.status==0?'checked':''}>&emsp;禁用
            </div>
            <div class="radio-inline">
                <input type="radio" class="form-control" name="status"  value="1" {:!empty($item)&&$item.status==1?'checked':''}>&emsp;激活
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">省份证</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" name="certificate"  value="{$item?$item.pushcode:''}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">邮箱</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" name="email" value="{$item?$item.email:''}" placeholder="填写店铺信息详细地址到号">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-4 control-label"></label>
        <div class="col-sm-2">
            <button type="button" id="ctlBtn" class="btn btn-primary" style="float: left;">&emsp;提交&emsp;</button>
            <button type="button" class="btn btn-default" style="float: right;" onclick="history.back();">&emsp;返回&emsp;</button>
        </div>
    </div>
</form>
<script>
    function uploadImage(obj){
        var uploader1 = WebUploader.create({
            auto:true,
            // swf文件路径
            swf: '/H-ui.admin/lib/webuploader/0.1.5/Uploader.swf',

            // 文件接收服务端。
            server: obj.url,

            //设置文件上传域的name
            //fileVal:"cover",

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: "#"+obj.pick,

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize:false,

            //上传并发数。允许同时最大上传进程数
            threads:1,

            //fileNumLimit:1,

            //fileSizeLimit:500,

            fileSingleSizeLimit:500*1024,

            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader1.on("fileQueued",function (file) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img style="display: inline-block;width:100px" class="'+obj.pick+'FromServer">' +
                '<div class="info">' + file.name + '</div>' +
                '<em class="close">×</em>'+
                '</div>'

                ),
                $img = $li.find('img');

            $("."+obj.pick+"FromServer").parent().remove();
            // $list为容器jQuery实例
            $("#"+obj.pick+"List").append( $li );

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader1.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr( 'src', src );
            }, 100, 100 );
        });
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader1.on( 'uploadSuccess', function( file,res ) {
            console.log(res);
            $( '#'+file.id ).addClass('upload-state-done');
            if(res.code==200){
                $( '#'+file.id+" img").attr("src",res.url);
                //coverArr.push(res.url);
            }else{
                console.log(res.errmsg);
            }
        });

        // 文件上传失败，显示上传出错。
        uploader1.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });
        return uploader1;
    }

    $("input:not('.make-switch')").iCheck({
        labelHover : false,
        cursor : true,
        checkboxClass : 'icheckbox_square-blue',
        radioClass : 'iradio_square-blue',
        increaseArea : '20%'
    });

    var upload1=uploadImage({
        url:"{:url('Upload/uploadOne')}",
        pick:"headimg"
    });


    $("#ctlBtn").on("click",function (e) {
        var headimgArr=[];
        console.log("1111");
        e.preventDefault();
        var form=new FormData($("form").get(0));
        $(".headimgFromServer").each(function (index) {
            headimgArr.push($(this).attr("src"));
        });

        var headimgstr=headimgArr[0];
        form.append("headimg",headimgstr);
        $.ajax({
            url:"{:url('member.table/edit')}",
            type:"post",
            data:form,
            processData: false,  // 不处理数据
            contentType: false,   // 不设置内容类型
            success:function (res) {
                console.log(res);
            }
        })
    });

    $(document).on("click",".close",function (e) {
        $(this).parent().remove();
    });

</script>
</body>
</html>